<!-- 
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div class="/*sideLeft*/">
	<div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-12" id="troubleShootHeader">
					<div class="box">
						<div class="box-header">
							<div class="box-name">
								<span>Choose Service & Time Frame</span>
							</div>
						</div>
						<div class="box-content">
							<div class="row row-margin-bottom services"></div>
							<div class="row dateTopGap dependencies">
								<div class="col-md-12">
									<div class="innerDepend clearfix">
										<div class="input-group addOnWrap">
											<span class="input-group-addon addOnRightBDR"
												id="basic-addon1">Add Dependencies</span> <span
												class="dependContainer"></span>
										</div>
									</div>
								</div>
							</div>
							<div class="row row-margin-bottom dateTopGap">
								<div class="col-xs-12 col-sm-8 col-md-8 componentWrap">
									<!-- <select data-id="components" multiple="" class="form-control"
							placeholder="Components">
							<option disabled="disabled">Components</option>
						</select> -->
									<input type="hidden" data-id="componentsSelection"
										name="Components" value="" />
								</div>
								
							</div>
							<div class="row form-group">
								<div class="col-md-10">
									<div class="row">
										<div data-id="dateRange"></div>
									</div>
								</div>
								<div class="col-md-2 text-right pull-right" style="z-index:1" id="showServicelog">
									<button data-id="searchServiceLogs"
										class="btn btn-success" type="button">
										Go to Logs</button>
								</div>
							</div>
							<div data-id="loader"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="box">
						<div class="box-header">
							<div class="box-name">
								<span>Log Events by Log Level</span>
							</div>
						</div>
						<div class="box-content">
							<div class="col-md-8" style="height: 250px;"
								data-id="serviceGraph"><svg></svg></div>

							<div class="col-md-3" style="margin-top:1%">
								<table class="table table-bordered table-hover custTable"
									data-id="logLevelTable">

								</table>
							</div>
						</div>
					</div>
				</div>
				<!-- div class="col-md-1">
				<button data-id="searchServiceLogs" type="button"
					class="btn btn-default">
					<i style="font-size: 1.8em;" class="fa fa-long-arrow-right"></i>
				</button>
			</div-->
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="box">
						<div class="box-header">
							<div class="box-name">
								<span>Top Users by Audit Source</span>
							</div>
						</div>
						<div class="box-content">

							<div data-id="topUsersGraph">
								<div data-id="usersLoader">Loading...</div>
								<svg style="min-height: 250px"></svg>
							</div>
						</div>
					</div>
				</div>

				<div class="col-md-6">
					<div class="box">
						<div class="box-header">
							<div class="box-name">
								<span>Audit Events by Audit Source</span>
							</div>
						</div>
						<div class="box-content">
							<div data-id="serviceLoadGraph">
								<div data-id="serviceLoadLoader">Loading...</div>
								<svg style="min-height: 250px"></svg>
							</div>
						</div>
					</div>
				</div>
				<!-- div class="col-md-1">
				<button data-id="searchAuditLogs" type="button"
					class="btn btn-default">
					<i style="font-size: 1.8em;" class="fa fa-long-arrow-right"></i>
				</button>
			</div-->
			</div>
		</div>
	</div>
</div>
<div class="sideRight hidden">
	<button type="button" class="expand-collapse">
		<i class="fa fa-arrow-right rotateIcon"></i>
	</button>
	<div class="col-md-12 sideTopGap">
		<button class="btn btn-success btn-block">Favrite Queries</button>
		<button class="btn btn-success btn-block">Recent Queries</button>
		<button class="btn btn-success btn-block">Common Queries</button>
		<button class="btn btn-success btn-block">Shared Queries</button>
	</div>
</div>